<template>
  <view class="poup">
    <view class="bg"></view>
    <view class="btn">
      <view class="left">这是底色</view>
      <view class="right" @tap="myPop">点这里点击弹窗</view>
    </view>
    <uni-popup ref="popup" type="center" >
      <view class="pou">
        <view class="content">
          <view class="bgimg">
            <view class="img">排行榜</view>
          </view>
          <view class="tab">
            <view class="item"  @tap="handleTap('家族偷水') " :style="{background:tab==='家族偷水'?background:''}">家族偷水</view>
            <view class="item"  @tap="handleTap('氧气值')" :style="{background:tab==='氧气值'?background:''}">氧气值</view>
            <view class="item"  @tap="handleTap('资源')" :style="{background:tab==='资源'?background:''}">资源</view>
          </view>
          <scroll-view  :scroll-top="scrollTop"
                        v-if="tab==='家族偷水'"
                        scroll-y="true"
                        class="scroll-Y"
                        @scroll="scroll">
            <view  class="scroll-item" v-for="(item,index) in list">
              <span class="index">{{index+1}}</span>
              <span class="user">
                <image :src="item.image"></image>
              </span>
              <span class="name">{{item.name}}</span>
              <span class="num">3544552</span>
            </view>
          </scroll-view>
          <scroll-view  :scroll-top="scrollTop"
                        v-if="tab==='氧气值'"
                        scroll-y="true"
                        class="scroll-Y"
                        @scroll="scroll">
            <view>氧气值氧气值氧气值氧气值氧气值氧气值氧气值</view>
          </scroll-view>
          <scroll-view  :scroll-top="scrollTop"
                        v-if="tab==='资源'"
                        scroll-y="true"
                        class="scroll-Y"
                        @scroll="scroll">

            <view>资源</view>
          </scroll-view>
          <image src="../../static/close.png" class="close" @tap="close"></image>
        </view>

      </view>
    </uni-popup>
  </view>

</template>
<script>
  import uniPopup from "@/components/uni-popup/uni-popup.vue"

  export default{
    data(){
      return{
        tab:'家族偷水',
        background:'rgba(177,212,91,1)',
        list:[
          {image:'../../static/图层%2020.png',
            name:'问归'
          },
          {image:'../../static/图层%2021.png',
            name:'小兔子'},
          {image:'../../static/图层%2020.png',
            name:'问归'},
          {image:'../../static/图层%2021.png',
            name:'小兔子'},
          {image:'../../static/图层%2020.png',
            name:'问归'},
          {image:'../../static/图层%2021.png',
            name:'小兔子'},
          {image:'../../static/图层%2020.png',
            name:'问归'},
          {image:'../../static/图层%2021.png',
            name:'小兔子'},
          {image:'../../static/图层%2020.png',
            name:'问归'},
          {image:'../../static/图层%2021.png',
            name:'小兔子'},
          {image:'../../static/图层%2020.png',
            name:'问归'},
          {image:'../../static/图层%2021.png',
            name:'问归'},
          ],
        scrollTop: 0,
      }
    },
    components: {uniPopup},
    methods:{
      myPop(){
        this.$refs.popup.open()
      },
      close(){
        this.$refs.popup.close()
      },
      scroll: function(e) {
        console.log(e)

      },
      handleTap(type){
        this.tab = type
      }
    }

  }

</script>
<style lang="scss">
  .poup{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-flow: column;
  }
  .bg{
    background: #364117;
    flex: 1;

  }
  .btn{
    height: 80rpx;
    line-height: 80rpx;
    background: #B5E044;
    display: flex;
    padding: 0 15rpx;
  }
  .left{
    flex: 1;
  }
  .right{
    color: #D66B50;
  }
  .pou{
    width: 530rpx;
    height: 790rpx;
    background: #fff;
    border-radius: 20rpx;
    .content{
      position: relative;
    }

  }
  .img{
    background: url("../../static/top.png") no-repeat;
    background-size: cover;
    width: 440rpx;
    height: 121rpx;
    position: relative;
    top: -30rpx;
    left: 45rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: .3em;
    font-size: 34rpx;
  }
  .bgimg{
    background: url("../../static/bg.png") no-repeat;
    width: 530rpx;
    height: 132rpx;
    background-size:cover ;
  }
  .tab{
    display: flex;
    padding: 0 43rpx;
    justify-content: space-around;
    margin-top: -10rpx;
  }
  .tab .item{
    width:128rpx;
    height:48rpx;
    line-height: 48rpx;
    /*background:rgba(177,212,91,1);*/
    background:rgba(210,210,210,1);;
    border-radius:10px;
    color: #fff;
    text-align: center;
  }
  .scroll-Y{
    margin-top: 15rpx;
    height: 600rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
  }
  .scroll-item{
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    .index{
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background: #FDBA1E;
      color: #fff;
      line-height: 30rpx;
      text-align: center;
      font-size: 28rpx;
      margin-right: 10rpx;
    }
    .user{
      image{
        width: 76rpx;
        height: 76rpx;
      }
    }
    .name{
      color: #707070;
      font-size: 28rpx;
      flex: 1;
      margin-left: 10rpx;
    }
    .num{
      color: #707070;
      font-size: 28rpx;
    }
  }
  .close{
    /*position: absolute;*/
    /*bottom: 0rem;*/
    /*left: 0rpx;*/
    width: 60rpx;
    height: 60rpx;
    margin: 20rpx 235rpx 0 235rpx;
    /*background: #007aff;*/
    /*z-index: 100000;*/

  }

</style>
